<script setup lang="ts">
import { computed, defineProps } from 'vue'
import { useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'

// 获取当前路由
const route = useRoute()
const { t } = useI18n()
const props = defineProps<{
  showBackIcon?: boolean;
}>(); 

// 计算当前页面标题
const title = computed(() => {
  if (route.meta.title) {
    return t(`${route.meta.title}.title`)
  }
  return ''
})

</script>

<template>
  <div class="navbar fixed top-0 left-0 right-0 h-12 flex items-center justify-between px-4 z-10 ">
    <div class="navbar-left">
      <slot name="left">
        <div 
          v-if="props.showBackIcon" 
          class="back-btn text-gray-700 dark:text-gray-200"
          @click="$router.back()"
        >
          <i class="i-back">←</i>
      </div>
      </slot>
    </div>
    
    <div class="navbar-title text-lg font-medium text-gray-800 dark:text-white">
      {{ title }}
    </div>
    
    <div class="navbar-right flex items-center">
      <slot name="right"></slot>
    </div>
  </div>
  
  <!-- 占位元素，防止内容被导航栏遮挡 -->
  <div class="h-12"></div>
</template>

<style scoped>
.i-back {
  display: inline-block;
  margin-right: 2px;
}
</style>